<template>
  <el-row>
    <slot></slot>
  </el-row>
</template>

<script>
/* eslint-disable */
import Layers from "@/lang/layers";
import FastForm from "@/lang/fast-form";

/**
 * Index
 *
 * 业务上，包含: “初始化”、 “序列化” 和 “表单重置” 三个功能；
 * 界面上，控制了整体的布局方式，比如，当前我们使用的是栈格系统。
 *
 * 代码上看不到 Index 和 FormLayout 存在彼此调用的关系，二者之间确实是紧耦合关系，
 * Index 通过 provide 向 FormLayout 传递参数。
 */
export default {
    name: "SmartFormGroup"
    , props: {
        // 表单模型
        model: {type: Array, default: undefined}

        // 行内显示输入框
        , inline: {type: Boolean, default: false}
        // 触发器，用于控制数据联动
        , trigger: {type: Function, default: undefined}
        // 页面默认值，用于实现表单重置功能
        , object: {type: Object, default: undefined}
        // 表单附加参数，类似于Hidden，这些数据会合并到序列化结果中
        , attach: {type: Object, default: undefined}
    }
    , data: function () {
        return {
            // 表单组
            fast_form: new FastForm(this.model)
        }
    }, provide() {
        return {
            // 所有子组件，都可以直接调用 fast-form 的 API
            fast_form: this.fast_form
        }
    }
    , watch: {
        /**
         * 侦听值的变化，如果改变了需要操作的对象，需要刷新表单的内容
         */
        object: {
            handler: function(val){
                this.val(val);
            }
        }
    }
    , created: function () {
        if(this.inline){
            this.fast_form.theme = 'inline';
        }

        if(this.object){
            this.fast_form.setDefaultValue(this.object);
        }
    }
    , methods: {
        /**
         * 验证表单是否有效
         */
        isValid: function () {
            return this.fast_form.isValid();
        },
        /**
         * 序列化成FormData
         *
         * @return {FormData}
         */
        formData: function () {
            let res = this.fast_form.formData();

            //增加附加参数
            if (this.attach !== undefined) {
                for (let key in this.attach) {
                    if (this.attach.hasOwnProperty(key)) {
                        res.append(key, this.attach[key]);
                    }
                }
            }
            return res;
        },
        /**
         * 序列化
         *
         * @return {object}
         */
        serialize: function () {
            let res = this.fast_form.serialize();

            //增加附加参数
            if (this.attach !== undefined) {
                for (let key in this.attach) {
                    if (this.attach.hasOwnProperty(key)) {
                        res[key] = this.attach[key];
                    }
                }
            }
            return res;
        },
        /**
         * 重置表单，为表单渲染新的值，也可以通过props.value实现，效果是一样的
         *
         * @values 值对象
         */
        val: function (obj) {
            this.fast_form.val(obj);
        },
        /**
         * 重置表单
         */
        reset: function () {
            this.fast_form.reset();
        }
    }
}
</script>
